<template>
	<view class="u-swiper-wrap" :style="{
		borderRadius: `${borderRadius}rpx`
	}">
		<swiper @change="change" @animationfinish="animationfinish" :interval="interval" :circular="circular"
			:duration="duration" :autoplay="autoplay" :previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
			:next-margin="effect3d ? effect3dNextMargin + 'rpx' : '0'" :style="{height: height + 'rpx'}"
			:display-multiple-items="slidenum">
			<swiper-item class="u-swiper-item swiperbanner" v-for="(item, index) in list" :key="index">
				<view class="u-list-image-wrap" @tap.stop.prevent="listClick(index)"
					:class="[current != index ? 'u-list-scale' : '']" :style="{
						borderRadius: `${borderRadius}rpx`,
						transform: effect3d && current != index ? 'scaleY(0.7)' : 'scaleY(1)',
						margin: effect3d && current != index ? '0 0' : 0
					}">
					<app-jump-button :item="item" :width="width" @btclick="click(item)" :open_type="item.open_type"
						:url="item[urlname]" :params="item.params">
						<image :style="itemStyle" class="u-swiper-image" :lazy-load="true" :src="item[name]"
							:mode="imgMode"></image>
						<view v-if="title" class="u-swiper-title u-line-1" :style="{
							'padding-bottom': titlePaddingBottom
						}">
							{{ item.title }}
						</view>
					</app-jump-button>
				</view>
			</swiper-item>
		</swiper>
		<view class="u-swiper-indicator" :style="{
				top: indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight' ? '12rpx' : 'auto',
				bottom: indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight' ? '12rpx' : 'auto',
				justifyContent: justifyContent,
				padding: `0 ${effect3d ? '74rpx' : '24rpx'}`
			}">
			<block v-if="mode == 'rect'">
				<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == current }"
					v-for="(item, index) in list" :key="index"></view>
			</block>
			<block v-if="mode == 'dot'">
				<view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == current }"
					v-for="(item, index) in list" :key="index"></view>
			</block>
			<block v-if="mode == 'round'">
				<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == current }"
					v-for="(item, index) in list" :key="index"></view>
			</block>
			<block v-if="mode == 'number'">
				<view class="u-indicator-item-number">{{ current + 1 }}/{{ list.length }}</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: "u-swiper",

		props: {
			// 当前屏同时显示块的数量
			slidenum: {
				type: Number,
				default: 1
			},
			// appbutton
			width: {
				type: Number,
				default: 100
			},
			// 后边距
			effect3dNextMargin: {
				type: [Number, String],
				default: -10
			},
			// 图片的自定义样式
			itemStyle: {
				type: String
			},
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			// 是否显示title标题
			title: {
				type: Boolean,
				default: false
			},
			// 用户自定义的指示器的样式
			indicator: {
				type: Object,
				default () {
					return {};
				}
			},
			// 圆角值
			borderRadius: {
				type: [Number, String],
				default: 0
			},
			// 隔多久自动切换
			interval: {
				type: [String, Number],
				default: 3000
			},
			// 指示器的模式，rect|dot|number|round
			mode: {
				type: String,
				default: 'round'
			},
			// list的高度，单位rpx
			height: {
				type: [Number, String],
				default: 250
			},
			// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight
			indicatorPos: {
				type: String,
				default: 'bottomCenter'
			},
			// 是否开启缩放效果
			effect3d: {
				type: Boolean,
				default: false
			},
			// 3D模式的情况下，激活item与前后item之间的距离，单位rpx
			effect3dPreviousMargin: {
				type: [Number, String],
				default: -10
			},
			// 是否自动播放
			autoplay: {
				type: Boolean,
				default: true
			},
			// 自动轮播时间间隔，单位ms
			duration: {
				type: [Number, String],
				default: 500
			},
			// 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张
			circular: {
				type: Boolean,
				default: true
			},
			// 图片的裁剪模式
			imgMode: {
				type: String,
				default: 'scaleToFill'
			},
			// 从list数组中读取的图片的属性名
			name: {
				type: String,
				default: 'image'
			},
			urlname: {
				type: String,
				default: 'url'
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: '#f3f4f6'
			}
		},
		watch: {
			// 如果外部的list发生变化，判断长度是否被修改，如果前后长度不一致，重置current值，避免溢出
			list(nVal, oVal) {
				if (nVal.length !== oVal.length) this.current = 0;
			}
		},
		data() {
			return {
				current: 0 // 当前活跃的swiper-item的index
			};
		},
		computed: {
			justifyContent() {
				if (this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start';
				if (this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center';
				if (this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end';
			},
			titlePaddingBottom() {
				let tmp = 0;
				if (this.mode == 'none') return '12rpx';
				if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode ==
					'number') {
					tmp = '60rpx';
				} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode !=
					'number') {
					tmp = '40rpx';
				} else {
					tmp = '12rpx';
				}
				return tmp;
			}
		},
		methods: {
			listClick(index) {
				this.$emit('click', index);
			},
			change(e) {
				let current = e.detail.current;
				this.current = current;
				// 发出change事件，表示当前自动切换的index，从0开始
				this.$emit('change', current);
			},
			click(item) {
				// console.log(item);
				if (item.url == 'javascript:;' || item.url == '/') {
					this.$emit('btclick', item)
					return;
				} else if (item.url.indexOf('/plugins/mch/goodslist/goodslist') != -1) {
					// item.url = item.url + '&mch_id=' + this.mch_id + '&store_id=' + this.store_id + '&title=' + item.name
					if (item.url.indexOf('?') == -1) {
						item.url = item.url + '?mch_id=' + this.mch_id + '&store_id=' + this.store_id + '&title=' + item
							.name
					} else {
						item.url = item.url + '&mch_id=' + this.mch_id + '&store_id=' + this.store_id + '&title=' + item
							.name
					}
					uni.navigateTo({
						url: item.url
					})
					// this.$emit('boqlist', item)
					return;
					// 12.20注释
					/* } else if (item.url.indexOf('/plugins/pt/index/index') != -1 || item.url.indexOf('/pages/goods/list') != -
						1) {
						if (item.params.kefu_url != undefined) {
							this.$storage.setStorageSync('KEFU', item.params.kefu_url)
						} else {
							this.$storage.removeStorageSync('KEFU')
						}
						if (item.url.indexOf('?') == -1) {
							item.url = item.url + '?title=' + item.name
						} else {
							item.url = item.url + '&title=' + item.name
						}

						uni.navigateTo({
							url: item.url
						})
						return; */
				} else {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			// 头条小程序不支持animationfinish事件，改由change事件
			// 暂不监听此事件，因为不再给swiper绑定current属性
			animationfinish(e) {
				// #ifndef MP-TOUTIAO
				// this.current = e.detail.current;
				// #endif
			}
		}
	};
</script>

<style lang="scss" scoped>
	.swiperbanner {
		position: relative;
	}

	.praise {
		position: absolute;
		bottom: 30rpx;
		right: 36rpx;
		z-index: 2;

		.image {
			width: 56rpx;
			height: 56rpx;
		}
	}

	.u-swiper-wrap {
		position: relative;
		overflow: hidden;
		transform: translateY(0);
	}

	.u-swiper-image {
		width: 100%;
		will-change: transform;
		height: 100%;
		display: block;
		/* #ifdef H5 */
		pointer-events: none;
		/* #endif */
	}

	.u-swiper-indicator {
		padding: 0 24rpx;
		position: absolute;
		display: flex;
		width: 100%;
		z-index: 1;
	}

	.u-indicator-item-rect {
		width: 20rpx;
		height: 4rpx;
		margin: 0 6rpx;
		transition: all 0.5s linear 0;
		border-radius: 2rpx;
		background-color: rgba(255, 255, 255, .5);
	}

	.u-indicator-item-rect-active {
		width: 30rpx;
		background-color: rgba(255, 255, 255, 1);
	}

	.u-indicator-item-dot {
		width: 14rpx;
		height: 14rpx;
		margin: 0 6rpx;
		border-radius: 20rpx;
		transition: all 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.u-indicator-item-dot-active {
		background-color: rgba(255, 255, 255, 0.8);
	}

	.u-indicator-item-round {
		width: 14rpx;
		height: 14rpx;
		margin: 0 6rpx;
		border-radius: 20rpx;
		transition: all 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.u-indicator-item-round-active {
		width: 34rpx;
		background-color: rgba(255, 255, 255, 0.8);
	}

	.u-indicator-item-number {
		padding: 6rpx 16rpx;
		line-height: 1;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.u-list-scale {
		transform-origin: center center;
	}

	.u-list-image-wrap {
		height: 100%;
		flex: 1;
		transition: all 0.5s;
		overflow: hidden;
		box-sizing: content-box;
		position: relative;
	}

	.u-swiper-title {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.3);
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: 28rpx;
		padding: 12rpx 24rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	.u-swiper-item {
		display: flex;
		overflow: hidden;
		align-items: center;
	}
</style>
